<!doctype html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>运动会</title>

    <link href="/css/common.css" rel="stylesheet">
    <link href="/css/index.css" rel="stylesheet">

    <% include common/main-lib.ejs %>
</head>
<body>

<div id="app">
  <el-container>
    <el-header>
      <% include common/header.ejs %>
    </el-header>
    <el-container>
      <el-aside width="200px">
        <% include common/aside.ejs %>
      </el-aside>
      <el-container>
        <el-main>
          <h1><%= pageName %></h1>
          <el-row type="flex" class="row-bg" justify="space-around">
            <el-col :span="10">
              <div class="grid-content bg-purple">
                <el-form ref="form" :model="form" label-width="80px" :rules="rules" ref="form">
                  <el-form-item label="比赛属性" prop="attribute">
                    <el-cascader
                      v-model="form.attribute"
                      placeholder="试试搜索：跳远"
                      :options="sports"
                      filterable
                      style="width: 100%;"
                    ></el-cascader>
                    </el-select>
                  </el-form-item>
                  <el-form-item label="比赛裁判" prop="judgeId">
                    <el-select v-model="form.judgeId" filterable placeholder="请选择比赛裁判" style="width: 100%;">
                      <el-option v-for="item in judges" :key="item.value" :label="item.label" :value="item.value"></el-option>
                    </el-select>
                  </el-form-item>
                  <el-form-item label="初赛时间">
                    <el-col :span="11">
                      <el-form-item prop="date0_1">
                        <el-date-picker type="date" placeholder="选择日期" value-format="yyyy-MM-dd" v-model="form.date0_1" style="width: 100%;"></el-date-picker>
                      </el-form-item>
                    </el-col>
                    <el-col class="line" :span="2" style="text-align: center;">-</el-col>
                    <el-col :span="11">
                      <el-form-item prop="date0_2">
                        <el-time-select
                          :picker-options="{
                            start: '08:00',
                            step: '01:00',
                            end: '18:00'
                          }"
                          placeholder="选择时间" value-format="HH-mm" v-model="form.date0_2" style="width: 100%;"></el-time-select>
                      </el-form-item>
                    </el-col>
                  </el-form-item>
                  <el-form-item label="决赛时间">
                    <el-col :span="11">
                      <el-form-item prop="date1_1">
                        <el-date-picker type="date" placeholder="选择日期" value-format="yyyy-MM-dd" v-model="form.date1_1" style="width: 100%;"></el-date-picker>
                      </el-form-item>
                    </el-col>
                    <el-col class="line" :span="2" style="text-align: center;">-</el-col>
                    <el-col :span="11">
                      <el-form-item prop="date1_2">
                        <el-time-select
                          :picker-options="{
                            start: '08:00',
                            step: '01:00',
                            end: '18:00'
                          }"
                          placeholder="选择时间" value-format="HH-mm" v-model="form.date1_2" style="width: 100%;"></el-time-select>
                      </el-form-item>
                    </el-col>
                  </el-form-item>
                  <el-form-item label="比赛分组" prop="gameSex">
                    <el-radio-group v-model="form.gameSex">
                      <el-radio label="1">男子组</el-radio>
                      <el-radio label="0">女子组</el-radio>
                    </el-radio-group>
                  </el-form-item>
                  <el-form-item label="比赛检录" prop="ready">
                    <el-switch v-model="form.ready"></el-switch>
                  </el-form-item>
                  <el-form-item label="分组人数" prop="groupNum">
                    <el-input-number v-model="form.groupNum" :min="4" :max="8" label="分组人数"></el-input-number>
                  </el-form-item>
                  <el-form-item label="排名得分" prop="gameSex">
                    <div style="display: flex; flex-wrap: wrap; justify-content: space-between">
                      <div>
                        <p style="text-align: center; margin: 0; padding: 0">第一名</p>
                        <el-input-number size="mini" v-model="form.num1" :min="1" :max="10"></el-input-number>
                      </div>
                      <div>
                        <p style="text-align: center; margin: 0; padding: 0">第二名</p>
                        <el-input-number size="mini" v-model="form.num2" :min="1" :max="10"></el-input-number>
                      </div><div>
                        <p style="text-align: center; margin: 0; padding: 0">第三名</p>
                        <el-input-number size="mini" v-model="form.num3" :min="1" :max="10"></el-input-number>
                      </div>

                    </div>
                  </el-form-item>
                  <el-form-item label="比赛备注" prop="desc">
                    <el-input type="textarea" v-model="form.desc"></el-input>
                  </el-form-item>
                  <el-form-item>
                    <el-button type="primary" @click="submitForm('form')">立即创建</el-button>
                    <el-button @click="resetForm('form')">重置</el-button>
                  </el-form-item>
                </el-form>
              </div>
            </el-col>
          </el-row>
        </el-main>
      </el-container>
    </el-container>
    <el-footer>田径运动会管理系统</el-footer>
  </el-container>
</div>

<script>
  new Vue({
    el: '#app',
    data () {
      return {
        form: {
          attribute: [],  // 比赛类型，项目编号，场地
          judgeId: '',
          date0_1: '',
          date0_2: '',
          date1_1: '',
          date1_2: '',
          gameSex: null,
          gameStatus: "0",
          desc: '',
          groupNum: 4,
          ready: false,
          num1: 3,
          num2: 2,
          num3: 1
        },
        rules: {
          attribute: [
            { type: 'array', required: true, message: '比赛属性', trigger: 'change' }
          ],
          judgeId: [
            { required: true, message: '请选择比赛裁判', trigger: 'change' }
          ],
          date0_1: [
            { required: true, message: '请选择初赛日期', trigger: 'change' }
          ],
          date0_2: [
            { required: true, message: '请选择初赛时间', trigger: 'change' }
          ],
          date1_1: [
            { required: true, message: '请选择决赛日期', trigger: 'change' }
          ],
          date1_2: [
            { required: true, message: '请选择决赛时间', trigger: 'change' }
          ],
          sex: [
            { required: true, message: '请选择比赛分组', trigger: 'change' }
          ]
        },
        judges: [],
        trackEvents: [],
        fieldEvents: [],
        eventList: [],
        sports: []
      }
    },
    methods: {
      id2name(id) {
        let name = "";
        this.eventList.forEach(e => {
          if (e.eventId === id) {
            name = e.eventName;
          }
        })
        return name;
      },
      getGameName(eventId, sex, status) {
        let sexName = sex === "1" ? "男子组" : "女子组";
        let statusName = status === "0" ? "初赛" : "决赛";
        let projectName = this.id2name(eventId);
        return sexName + "：" + projectName + " " + statusName;
      },
      doSubmit() {

        let newGame = {
          gameId: this.form.gameSex + this.form.gameStatus + this.form.attribute[1],  // 性别  + 比赛状态 + 运动项目编号 = 比赛编号
          gameName: this.getGameName(this.form.attribute[1], this.form.gameSex, this.form.gameStatus),
          gameType: this.form.attribute[0],
          judgeId: this.form.judgeId,  // 裁判 id
          gameField: this.form.attribute[2],  // 场地
          eventId: this.form.attribute[1],  // 运动项目 id
          time0: this.form.date0_1 + " " + this.form.date0_2,  // 初赛时间
          time1: this.form.date1_1 + " " + this.form.date1_2,  // 决赛时间
          gameSex: this.form.gameSex,  // 性别
          gameStatus: this.form.gameStatus,  // 比赛状态：0初赛，1决赛
          groupNum: this.form.groupNum,  // 分组人数
          desc: this.form.desc,  // 比赛备注
          ready: this.form.ready,  // 比赛检录
          gameMark: [this.form.num1, this.form.num2, this.form.num3]  // 比赛前三名得分
        }

        let _this = this;
        // console.log(newGame)

        axios.post('/newGame', newGame)
          .then(function (response) {
            if (response.data.status === 200) {
              _this.$message.success(response.data.msg);
              _this.resetForm('form');
            }
          })
          .catch(function (error) {
            console.log(error)
            _this.$alert('服务器错误，请稍后重试', {
              confirmButtonText: '确定',
              type: 'error'
            })
          });
      },
      submitForm(formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            this.doSubmit();
          } else {
            console.log('error submit!!');
            return false;
          }
        });
      },
      resetForm(formName) {
        this.$refs[formName].resetFields();
      },
      handleOpen(key, keyPath) {
        console.log(key, keyPath);
      },
      handleClose(key, keyPath) {
        console.log(key, keyPath);
      },
      getJudgeList() {
        return axios.get('/list/judge');
      },
      getEventList() {
        return axios.get('/list/event');
      },
      toJudges(response) {
        if (response.data.status === 200) {
          this.judges = response.data.data.map(e => {
            return {
              label: e.judgeName,
              value: e.judgeId
            }
          });
        } else {
          console.log(error)
          this.$alert('服务器错误，请稍后重试', {
            confirmButtonText: '确定',
            type: 'error'
          })
        }
      },
      toEventList(response) {
        let _this = this;
        if (response.data.status === 200) {
          this.eventList = response.data.data;
          response.data.data.forEach(e => {
            if (e.eventType === "te") {
              _this.trackEvents.push(e)
            } else if (e.eventType === "fe") {
              _this.fieldEvents.push(e)
            }
          });
          // console.log("fieldEvents", this.fieldEvents)
          // console.log("trackEvents", this.trackEvents)
        } else {
          console.log(error)
          this.$alert('服务器错误，请稍后重试', {
            confirmButtonText: '确定',
            type: 'error'
          })
        }
      },
      toEvents(array) {
        let newArray = [];
        newArray = array.map(e => {
          let children = [];
          children = e.fields.map(e => {
            return {
              value: e,
              label: e
            }
          })

          return {
            value: e.eventId,
            label: e.eventName,
            children
          }
        })
        return newArray;
      },
      toSports() {
        this.sports = [{
          value: 'fe',
          label: '田赛',
          children: this.toEvents(this.fieldEvents)
        }, {
          value: 'te',
          label: '径赛',
          children: this.toEvents(this.trackEvents)
        }]
      }
    },
    created () {
      let _this = this;

      axios.all([_this.getJudgeList(), _this.getEventList()])
        .then(axios.spread(function (judgeList, eventList) {
          _this.toJudges(judgeList);
          _this.toEventList(eventList);
          _this.toSports();
          // console.log("judges", judges);
          // console.log("events", events);
        }));
    }
  })
</script>
</body>
</html>
